import React, { Component, Fragment } from 'react';
import { Card, Descriptions, Image, Button } from 'antd'
import { connect } from 'dva';
import constant from '../../constant/constant'

class ValidationReviewPage extends Component {
    constructor(props) {
        super(props)
    }

    componentDidMount() {
        if (this.props.verification.phase == 2) {
            this.props.dispatch({
                type: "application/getTechnologyVerificationMechanismByTechnologyId",
                data: {
                    verificationApplicationId: this.props.verification.technologyId
                }
            })
        }
    }

    goToNextProcess = () => {
        this.props.dispatch({
            type:"application/goToNextProcess",
            data:{
                verificationApplicationId:this.props.verification.technologyId
            }
        })
    }

    renderMechanismInformation = phase => {
        if (phase == 2) {
            return (
                <Fragment>
                    <div style={{ marginTop: 50 }}>
                        <Descriptions title={this.props.verification.verificationMechanism.mechanismName} bordered={true}>
                            <Descriptions.Item label="联系电话">{this.props.verification.verificationMechanism.phone}</Descriptions.Item>
                            <Descriptions.Item label="联系邮箱">{this.props.verification.verificationMechanism.email}</Descriptions.Item>
                            <Descriptions.Item label="地址">{this.props.verification.verificationMechanism.address}</Descriptions.Item>
                            <Descriptions.Item label="企业公众号/APP二维码"><Image width={200} src={constant.serverUrl + constant.fileUrl.mechanismUrl + this.props.verification.verificationMechanism.appQRCode}></Image></Descriptions.Item>
                        </Descriptions>
                    </div>
                    <Button type='primary' style={{marginTop:20}} onClick={this.goToNextProcess}>下一步</Button>
                </Fragment>
            )
        }
    }

    render() {
        return (
            <Fragment>
                <Card title={this.props.verification.phase == 2 ? "您已通过资格审查" : (this.props.verification.examination == 0 ? "您未通过资格审查" : "您正在进行资格审查")}
                    style={{ width: 800 }}
                >
                    <Descriptions>
                        <Descriptions.Item label="验证机构">{this.props.verification.verificationMechanism.mechanismName ? this.props.verification.verificationMechanism.mechanismName : <a>验证委员会暂未分配</a>}</Descriptions.Item>
                        <Descriptions.Item label="验证委员会建议">{this.props.verification.reason ? this.props.verification.reason : "暂无" }</ Descriptions.Item>
                    </Descriptions>
                </Card>
                {this.renderMechanismInformation(this.props.verification.phase)}
            </Fragment>
        )
    }
}

const mapStateToProps = state => {
    let verification = state.application.verification
    return {
        verification
    }
}

export default connect(mapStateToProps)(ValidationReviewPage)